<template>
  <view class="recommend_content">
    <scroll-view
      v-show="isEmpty === false"
      scroll-y="true"
      :scroll-top="scrollTop"
      class="recommend_content"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherpulling="onPulling"
      @scrolltolower="lower"
    >
      <!-- <view >
        <view @click.stop="toRecommendAction" class="recommended_users">
          <view class="recommended_users_text">
            <view class="recommended_users_title">分配对象啦~</view>
            <view class="recommended_users_line"
              >快来看看专门为你定制的对象吧</view
            >
            <view class="recommended_users_line">据说这里牵手成功率最高哦</view>
          </view>
          <view class="recommended_users_img">
            <image
              v-for="(item, index) in recommended_users"
              :key="index"
              :src="item"
            ></image>
          </view>
        </view>
      </view> -->
      <view  @click="goCompleteInfo">
        <image
          class="uncomplete-banner"
          src="http://static.kuaimayoupin.com/6937275974943684.png"
          mode="aspectFit"
        ></image>
      </view>
      <!-- 交友活动、一对一牵线 -->
      <div class="act-box">
        <image
          class="act-img"
          src="https://static.kuaimayoupin.com/7349135954501054.gif"
          @click="goMall"
        ></image>
        <image
          class="act-img"
          src="https://static.kuaimayoupin.com/7705590211976665.gif"
          @click="goAct"
        ></image>
      </div>

      <view class="recommend_list">
        <view
          @click.stop="toDetail(item)"
          v-for="(item, index) in recommendList"
          :key="index"
          class="card"
        >
          <view class="top-card">
            <view
              v-if="
                item.fate_value != -4 &&
                item.user_info.codeID != loginUser.codeID
              "
              class="tip-wrapper"
            >
              <view @click.stop="clickFate(item)" class="tip"
                >缘分值：{{ item.fate_value | fateformat }}</view
              >
            </view>
            <view class="avatar-and-info">
              <view class="avatar-box" @click.stop="toPersionHomeAction(item)">
                <image :src="item.user_info.avatar" mode="aspectFill"></image>
              </view>
              <view class="info-box">
                <view class="name-wrapper">
                  <text class="name">{{
                    item.user_info.nick_name || "TA很神秘"
                  }}</text>
                  <view class="per">
                    <text class="vip" v-if="showVip(item.user_info.vip)">{{
                      getVipText(item.user_info.vip)
                    }}</text>
                    <text v-if="item.user_info.sex != 'NONE'" class="real">{{
                      item.user_info.sex | sexFilter
                    }}</text>
                    <text class="tag2" v-if="item.user_info.age">{{
                      item.user_info.age
                    }}</text>
                  </view>
                </view>
                <view class="info">
                  <text v-if="item.user_info.job" class="identity1">{{
                    item.user_info.job
                  }}</text>
                  <text
                    v-if="item.user_info.height && item.user_info.job"
                    class="info-line"
                    >|</text
                  >
                  <text class="height">{{
                    item.user_info.height ? item.user_info.height + "cm" : ""
                  }}</text>
                  <text
                    v-if="item.user_info.birthday.length != 0"
                    class="info-line"
                    >|</text
                  >
                  <text class="educational">{{
                    item.user_info.birthday | birthdayFilter
                  }}</text>
                  <text v-if="item.user_info.marital_status" class="info-line"
                    >|</text
                  >
                  <text class="isMarried">{{
                    item.user_info.marital_status
                  }}</text>
                </view>
              </view>
            </view>
            <view class="des-soliloquy">
              {{ item.user_info.soliloquy }}
            </view>
            <view class="last-talktips-head">
              <view class="title">最新动态</view>
              <view class="time">{{ item.created_time | dateformatsort }}</view>
            </view>
            <view class="text-note">{{ item.note }}</view>
            <template v-if="getItemImgs(item).length > 0">
              <view class="img-box">
                <img-box
                  :imgList="getItemImgs(item)"
                  :isVideo="isvideo(item)"
                  :num="getItemImgs(item).length"
                ></img-box>
              </view>
            </template>

            <view class="bottom">
              <view @click.stop="hellowAction(item)" class="hello-btn-view">
                <text class="placeholder_text"
                  >心动不如行动，快来打个招呼吧</text
                >
              </view>
              <view class="bottom-right">
                <view @click.stop="praiseAction(item)" class="heart">
                  <image :src="getAixin(item)" mode=""></image>
                  <text>{{ item.like_count || 20 }}</text>
                </view>
                <view @click.stop="hellowAction(item)" class="flower">
                  <image :src="getFlower(item)" mode=""></image>
                  <text>{{ item.gifts_count || 0 }}</text>
                </view>
                <view @click.stop="shareAction(item)" class="share">
                  <image
                    src="../../../static/images/detail/share.png"
                    mode=""
                  ></image>
                  <text>分享</text>
                  <button
                    :id="item.userId"
                    class="share-btn"
                    open-type="share"
                  ></button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom"></view>
    </scroll-view>
    <u-back-top 
    :scrollTop="scrollTop" 
    @backToTop="backToTop" 
    :scroll="scroll" 
    icon="arrow-up" 
    top="40"></u-back-top>
  </view>
</template>

<script>
import { EventBus } from "@/util/event-bus.js";
import {
  homeConnentRecommend,
  recommendUsers,
  giveLike,
} from "@/api/home/home.js";
// import EmptyView from "@/pageA/empty/empty.vue";
import imgBox from "./imageBox.vue";
import { getAges } from "@/util/tool";
import { mapActions, mapGetters, mapMutations } from "vuex";

export default {
  components: {
    // EmptyView,
    imgBox,
  },
  data() {
    return {
      loadingTop: 0,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      // recommendList: [], // 推荐列表
      // _freshing: false,
      // triggered: false,
      gifts: [],
      isEmpty: false,
      recommended_users: [],
      offset: 0,
      checkLogin: false,
      hasCompleteInfo: false,
      loginUser: uni.getStorageSync("userInfo") || {},
    };
  },
  computed: {
    ...mapGetters("homeStore", ["freshing", "triggered", "recommendList"]),
  },
  watch: {},
  onBackPress() {
    console.log("onBackPress---------");
  },
  created() {
    console.log("created~~~~~~~~~~~~~~~~~~~~~~");
    let that = this;
    EventBus.$on("loginSuccess", function (res) {
      console.log('EventBus.$on("loginSuccess"~~~~~~~~~~~~~~~~~~~~~~');
      that.loadReset();
    });
    EventBus.$on("recommendListRefresh", function (res) {
      that.loadReset(true);
    });
    this.getGiftsListRequest();
    that.loadReset();
  },
  filters: {
    birthdayFilter(birthday) {
      return getAges(birthday);
    },
    sexFilter(sex) {
      if (sex === "NONE") return "";
      if (sex === "F") return "女";
      return "男";
    },
    fateformat(fateValue) {
      if (parseInt(fateValue) > 0) {
        return fateValue;
      } else if (parseInt(fateValue) == -1) {
        return "完善信息查看";
      } else if (parseInt(fateValue) == -2) {
        return "完善恋人信息查看";
      } else if (parseInt(fateValue) == -3) {
        return "登录后查看";
      }
      return fateValue;
    },
  },
  methods: {
    ...mapActions("homeStore", ["getList", "loadMore", "loadReset"]),
    ...mapMutations("homeStore", ["setRefresh", "setTrigger"]),
    scroll(e) {
      // this.old.scrollTop = e.detail.scrollTop;
      this.scrollTop = e.detail.scrollTop;
    },
    backToTop(e) {
      // this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
    },
    shareAction(item) {},
    goMall() {
      uni.switchTab({ url: "/pages/mall/mall" });
    },
    goAct() {
      uni.navigateTo({
        url: "/pageA/product-detail/product-detail?id=61f0ee6f9e8047003a73a13a",
      });
    },
    clickFate(item) {
      //fate_value 约定 正常值>0 完善信息查看 -1 完善恋人信息查看-2 登录后查看-3
      if (item.fate_value === -1) {
        this.goCompleteInfo();
      } else if (item.fate_value === -3) {
        EventBus.$emit("showLogin");
      } else if (item.fate_value === -2) {
        // EventBus.$emit("showLogin");
        this.$emit("goCustomizePage");
      }
    },
    refreshCheckLogin() {
      const userInfo = uni.getStorageSync("userInfo") || {};
      this.checkLogin = userInfo.codeID != null;
      if (!userInfo.nick_name) {
        this.hasCompleteInfo = false;
      } else {
        this.hasCompleteInfo = userInfo.nick_name.length !== 0;
      }
    },
    goCompleteInfo() {
      console.log("goCompleteInfo");
      this.$emit("goCompleteInfo");
    },
    toPersionHomeAction(item) {
      // if (!this.checkLogin) {
      //   EventBus.$emit("showLogin");
      //   return;
      // }
      let userId = item.user_id ?? "";
      let url = "/pageA/personalHome/personalHome?user_id=" + userId;
      uni.navigateTo({
        url: url,
      });
    },
    getAixin(item) {
      if (item.has_give_like == true) {
        return "../../../static/images/home/aixin.png";
      } else {
        return "../../../static/images/detail/heart_2.png";
      }
    },
    getFlower(item) {
      if (item.has_send_gifts) {
        return "../../../static/images/detail/flower_1.png";
      } else {
        return "../../../static/images/detail/flower_2.png";
      }
    },
    hellowAction(item) {
      if (!this.checkLogin) {
        EventBus.$emit("showLogin");
        return;
      }
      // if (this.isAuth() == false) {
      //   let userInfo = item.user_info || {};
      //   this.$emit("showAuth", {
      //     userName: userInfo.nick_name,
      //     avatar: userInfo.avatar,
      //   });
      //   return;
      // }
      console.log("hellowAction~~~~~~~~~~~~~~~", item);
      let giftsData = {};
      giftsData.gifts = this.gifts;
      giftsData.userInfo = item.user_info;
      this.$emit("showHello", giftsData);
    },
    praiseAction(item) {
      if (!this.checkLogin) {
        EventBus.$emit("showLogin");
        return;
      }
      giveLike({
        id: item._id || "",
        like: !(item.has_give_like || false),
      }).then(
        (res) => {
          if (res.status == 1) {
            if (item.has_give_like || false) {
              item.like_count -= 1;
            } else {
              item.like_count += 1;
              uni.showToast({
                title: "我喜欢你点赞的样子哦",
                icon: "none",
              });
            }
            item.has_give_like = !(item.has_give_like || false);
          }
        },
        (err) => {}
      );
    },
    toRecommendAction() {
      this.$emit("toTag", 1);
    },
    getItemImg(item) {
      let pics = item.pic_urls || [];
      let video_url = item.video_url || "";
      if (pics.length > 0) {
        return pics[0];
      } else if (video_url.length > 0) {
        return video_url + "?vframe/jpg/offset/0";
      } else {
        return item.user_info.avatar || "";
      }
    },
    getItemImgs(item) {
      let pics = item.pic_urls || [];
      let video_url = item.video_url || "";
      let avatarUrl = item.user_info.avatar || "";
      if (pics.length > 0) {
        return pics;
      } else if (video_url.length > 0) {
        let img = video_url + "?vframe/jpg/offset/0";
        return [img];
      } else if (avatarUrl.length > 0) {
        return [avatarUrl];
      } else {
        return [];
      }
    },
    isvideo(item) {
      let pics = item.pic_urls || [];
      let video_url = item.video_url || "";
      if (pics.length === 0 && video_url.length != "") {
        return true;
      }
      return false;
    },
    lower() {
      this.loadMore();
    },
    onPulling(e) {
      console.log("onPulling");
    },
    onRefresh() {
      if (this._freshing) return;
      // this._freshing = true;
      this.setRefresh(true);

      // let that = this;
      // this.getRecommend(() => {
      //   that.triggered = false;
      //   that._freshing = false;
      //   console.log("getRecommend 加载完成 callback");
      // });
      this.loadReset();
      this.getBannerList();
    },
    onRestore() {
      console.log("onRestore~~~~~~~~~~");
      // this.triggered = "restore";
      this.setTrigger("restore");
    },
    // 获取 推荐列表
    getRecommend(cb) {
      let that = this;
      homeConnentRecommend({ limit: 30, offset: this.offset }).then(
        (res) => {
          if (res.status == 1) {
            that.recommendList = res.data;
            that.offset = 0;
          }
          this.isEmpty = this.recommendList.length === 0;
          cb && cb();
        },
        (err) => {
          this.isEmpty = true;
          cb && cb();
        }
      );
    },
    // 获取 推荐列表
    getBannerList() {
      recommendUsers().then((res) => {
        if (res.status == 1) {
          let recommendList = res.data.forUser;
          let lists = [];
          recommendList.map((user, index) => {
            if (index <= 4) {
              lists.push(user.userinfo.avatar);
            }
          });
          this.recommended_users = lists;

          console.log("recommended_users-------", this.recommended_users);
        }
      });
    },
    getGiftsListRequest() {
      // getGiftsList().then((res) => {
      //   if (res.status == 1) {
      //     this.gifts = res.data;
      //     console.log("------gifts--------", this.gifts);
      //   }
      // });
    },
    emptyClick() {
      // this.getRecommend(true);
    },
    showLoading(show = true) {
      if (show) {
        uni.showLoading({
          title: "",
        });
      } else {
        uni.hideLoading();
      }
    },
    // hellowAction(item) {
    //   if (!this.checkLogin) {
    //     EventBus.$emit("showLogin");
    //     return;
    //   }
    //   let giftsData = {};
    //   giftsData.gifts = this.gifts;
    //   giftsData.user_info = item;
    //   this.$emit("showHello", giftsData);
    // },
    /// 心动留言
    heartMessageAction(item) {
      if (!this.checkLogin) {
        EventBus.$emit("showLogin");
        return;
      }
      if (this.isAuth() == false) {
        this.$emit("showAuth", {
          userName: item.nick_name,
          avatar: item.avatar,
        });
        return;
      }
      this.hellowAction(item);
    },
    /// 了解ta
    knowAction(item) {
      uni.showToast({
        title: "功能待开发",
        icon: "none",
      });
    },
    isAuth() {
      return getApp().globalData.user_info.certificated || false;
    },
    getText(str) {
      let content = str || "";
      if (content == "") {
        return "保密";
      } else {
        return content;
      }
    },
    getHeightText(str) {
      let content = str || "";
      if (content == "") {
        return "保密";
      } else {
        return content + "cm";
      }
    },
    showVip(vip) {
      let vipStr = vip || "";
      if (vipStr == "-1" || vipStr == "") {
        return false;
      } else {
        return true;
      }
    },
    getVipText(str) {
      let vip = str || "VIP";
      return vip;
    },
    hideAuthAction() {},
    toDetail(data) {
      // if (!this.checkLogin) {
      //   EventBus.$emit("showLogin");
      //   return;
      // }
      let url =
        "/pages/home/detial/detial?trendsId=" +
        (data.id || "") +
        "&userId=" +
        (data.user_id || "");
      uni.navigateTo({
        url: url,
      });
    },
    checkSoliloquy(str) {
      let content = str || "";
      return content == "" ? false : true;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.recommended_users {
  display: flex;
  padding: 0 28rpx;
  position: relative;
  margin: 0 auto;
  margin-top: 23rpx;
  width: 710rpx;
  height: 200rpx;
  background: linear-gradient(
    347deg,
    rgba(248, 212, 87, 1) 0%,
    rgba(254, 21, 194, 1) 100%
  );
  border-radius: 10rpx;
  color: #fff;

  .recommended_users_text {
    .recommended_users_title {
      padding-top: 44rpx;
      font-size: 30rpx;
      line-height: 42rpx;
      margin-bottom: 10rpx;
    }

    .recommended_users_line {
      padding-top: 4rpx;
      font-size: 26rpx;
      line-height: 36rpx;
    }
  }

  .recommended_users_img {
    position: relative;
    padding-top: 112rpx;
    margin-left: 24rpx;
    flex: 1;

    image {
      width: 66rpx;
      height: 66rpx;
      position: absolute;
      border-radius: 33rpx;
    }

    image:nth-child(5) {
      left: 0rpx;
    }

    image:nth-child(4) {
      left: 46rpx;
    }

    image:nth-child(3) {
      left: 98rpx;
    }

    image:nth-child(2) {
      left: 142rpx;
    }

    image:nth-child(1) {
      left: 188rpx;
    }
  }
}

.recommended_users::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: -18rpx;
  left: 124rpx;
  /* background: #FE15C2; */

  border-top: 0rpx solid #fe15c2;
  border-bottom: 18rpx solid #fe15c2;
  border-left: 14rpx solid transparent;
  border-right: 14rpx solid transparent;
}

.recommend_content {
  height: 100%;
  width: 100%;
  background-color: #ffffff;

  .uncomplete-banner {
    height: 200rpx;
    width: 100%;
    object-fit: cover;
    padding: 0 24rpx;
    box-sizing: border-box;
  }

  .act-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 15rpx 0 15rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
    .act-img {
      flex: 1;
      object-fit: cover;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: 160rpx;
      border-radius: 20rpx;
    }
  }

  .bottom {
    height: 35rpx;
    width: 100%;
  }

  .mnoticebar {
    width: 300rpx;
  }

  .tag2 {
    font-size: 26rpx;
    color: rgba(45, 142, 255, 1);
    border-radius: 4rpx;
    border: 2rpx solid rgba(45, 142, 255, 1);
    padding: 0 10rpx;
    background: #e9f3ff;
  }

  .recommend_list {
    .card {
      width: 670rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      //   background: rgba(255, 255, 255, 1);
      background: #fff;
      box-shadow: 0upx 6upx 20upx 0upx rgba(0, 42, 64, 0.07);
      border-radius: 12upx;
      .top-card {
        width: 670rpx;
        // background: url("@/static/images/home/commond_card_bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 30rpx 18rpx;

        .tip-wrapper {
          display: flex;
          .tip {
            height: 54rpx;
            background: #f9d05a;
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #474a58;
            line-height: 54rpx;
            padding: 0 10rpx;
          }
        }

        .des-soliloquy {
          margin: 18rpx 6rpx 0 6rpx;
          border-radius: 8rpx;
          padding: 20rpx 14rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #8389a0;
          line-height: 45rpx;
          background: #f9f9f9;
        }

        .avatar-and-info {
          display: flex;
          flex-direction: row;
          margin-top: 30rpx;

          .avatar-box {
            width: 180rpx;
            height: 208rpx;
            background: url("@/static/images/home/commond_avatar_bg.png")
              no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

            image {
              width: 152rpx;
              height: 152rpx;
              border-radius: 76rpx;
              margin-bottom: 16rpx;
              margin-right: 4rpx;
            }
          }

          .info-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 30rpx;
            margin-bottom: 8rpx;
            padding-top: 0 8rpx;

            .name-wrapper {
              display: flex;
              flex-direction: row;
              align-items: center;

              .name {
                color: #474a58;
                font-size: 34rpx;
                font-weight: 500;
                margin-right: 10rpx;
              }
            }

            .per {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              //   margin-top: 10rpx;
              .name {
                color: #474a58;
                font-size: 34rpx;
                font-weight: 500;
                margin-right: 10rpx;
              }

              .vip {
                margin-right: 10rpx;

                border-radius: 4rpx;
                border: 2rpx solid #ffaa37;
                padding: 0 10rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: #ffaa37;
                line-height: 36rpx;
                background: #f4ede4;
              }

              .real {
                margin-right: 10rpx;
                font-size: 26rpx;
                color: #2d8eff;

                line-height: 36rpx;
                border-radius: 4rpx;
                border: 2rpx solid #2d8eff;
                padding: 0 10rpx;
                background-color: #e3e5f6;
              }
            }

            .info {
              margin-top: 20rpx;
              font-size: 26rpx;
              line-height: 36rpx;
              color: #8389a0;

              .identity1 {
                font-size: 20rpx;
                color: #b6890e;
                background: rgba(255, 237, 187, 0.85);
                border-radius: 8px;
                padding: 2rpx 14rpx;
              }

              .info-line {
                text-align: center;
                line-height: 36rpx;
                padding: 0 10rpx;
              }
            }
          }
        }

        .last-talktips-head {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding: 20rpx;
          box-sizing: border-box;
          .title {
            font-size: 28rpx;
            color: #ff69b5;
          }

          .time {
            font-size: 20rpx;
            color: #666;
          }
        }

        .text-note {
          padding: 0 20rpx;
        }

        .img-box {
          padding: 0 20rpx;
        }

        .bottom {
          box-sizing: border-box;
          width: 100%;
          height: 104upx;
          margin: 12upx 0;
          background: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // padding: 0 32upx;

          .hello-btn-view {
            display: flex;
            align-items: center;
            align-items: center;
            width: 416upx;
            height: 64upx;
            background: #f9f9f9;
            border-radius: 4upx;
            padding: 0 20upx;
            box-sizing: border-box;

            text {
              width: 404upx;
            }
          }

          .placeholder_text {
            width: 100%;
            font-size: 26upx;
            color: #8389a0;
            line-height: 64upx;
          }

          .bottom-right {
            margin-left: 20upx;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;

            .heart {
              display: flex;
              flex-direction: column;
              align-items: center;

              image {
                width: 46upx;
                height: 40upx;
              }

              text {
                line-height: 32upx;
                font-size: 22upx;
                color: #8389a0;
              }
            }

            .flower {
              display: flex;
              flex-direction: column;
              align-items: center;

              image {
                width: 42upx;
                height: 50upx;
              }

              text {
                line-height: 32upx;
                font-size: 22upx;
                color: #8389a0;
              }
            }

            .share {
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;

              image {
                width: 40upx;
                height: 38upx;
              }

              text {
                font-size: 22upx;
                font-weight: 400;
                color: rgba(131, 137, 160, 1);
              }

              .share-btn {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                right: 0;
                z-index: 10;
                background: transparent;
              }

              button::after {
                border: none;
              }
            }
          }
        }
      }

      .line {
        width: 622rpx;
        margin: 20rpx;
        border-bottom: 2rpx dashed #dfe1ec;
        background-color: #ffffff;
      }

      .btns {
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;

        .btn {
          width: 299rpx;
          height: 72rpx;
          border-radius: 4rpx;
          border: 2rpx solid #dfe1ec;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;

          image {
            width: 26.8rpx;
            height: 31.2rpx;
            margin: 0 10rpx;
          }
        }

        .yes {
          background: #fff;
          color: #474a58;
        }

        .no {
          background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
          color: #fff;
        }
      }
    }
  }
}
</style>
